<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!--Page Related styles-->
<link href="assets/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<link href="css/sysDataTable.css" rel="stylesheet" />
<div class="row">
	<div class="widget">
		<div class="col-xs-12 col-md-12">
			<div class="widget-header bordered-bottom bordered-yellow">
				<span class="widget-caption">Search on All Columns</span>
				<div class="widget-buttons">
					<a href="#" data-toggle="maximize"> <i class="fa fa-expand"></i> </a> <a href="#" data-toggle="collapse"> <i class="fa fa-minus"></i> </a> 
				</div>
			</div>
			<div class="widget-body no-padding table-scrollable datableView" >
				<div class="dataTableHandle">
					<form action="" method="post" class="seachFrom">
					    <div class="selectedFields advancedSearch">
		                       <div class="form-group field">
	                           		<label class="fieldLabel">主键Id：</label>
		                           <span class="input-icon">
		                               <input type="text" class="form-control input-sm">
		                               <i class="glyphicon glyphicon-search blue"></i>
		                           </span>
		                       </div>
		                       <div class="form-group field">
	                           		<label class="fieldLabel">主键Id：</label>
		                           <span class="input-icon">
		                               <input type="text" class="form-control input-sm">
		                               <i class="glyphicon glyphicon-search blue"></i>
		                           </span>
		                       </div>
		                       <div class="form-group field">
	                           		<label class="fieldLabel">名称：</label>
		                           <span class="input-icon">
		                               <input type="text" class="form-control input-sm">
		                               <i class="glyphicon glyphicon-search blue"></i>
		                           </span>
		                       </div>
		                       <div class="form-group field">
	                           		<label class="fieldLabel">主键Id：</label>
		                           <span class="input-icon">
		                               <input type="text" class="form-control input-sm">
		                               <i class="glyphicon glyphicon-search blue"></i>
		                           </span>
		                       </div>
		                       <div class="form-group field">
	                           		<label class="fieldLabel">主键Id：</label>
		                           <span class="input-icon">
		                               <input type="text" class="form-control input-sm">
		                               <i class="glyphicon glyphicon-search blue"></i>
		                           </span>
		                       </div>
					    </div>
				    </form>
				    <div class="baseController">
						<div class="icon fieldOpenBtn">
						    <span class="typcn typcn-arrow-unsorted earchSwitch" title="单击此按钮关闭关键字搜索并打开高级搜索"></span>
						</div>
				    	<%-- 关键字搜索 --%>
				    	<div class="keywordSeach">
							<div class="serviceSeachInput">
	                         	<label class="seachInputLabel">关键字：</label>
								<span class="input-icon">
								    <input type="text" class="form-control input-sm">
								    <i class="glyphicon glyphicon-search blue"></i>
								</span>
							</div>
							<label class="filterFieldTools">过滤字段：
							    <select id="id_select" class="selectpicker bla bli notShow" multiple data-live-search="true">
							        <optgroup label="选择过滤字段" data-subtext="&lt;br&gt;需要过滤的字段" data-icon="icon-ok">
							            <option>Id</option>
							            <option selected>name-姓名</option>
							            <option>IdCard-身份证号</option>
							            <option>Id</option>
							            <option>IdCard-身份证号</option>
							            <option>Id</option>
							            <option>IdCard-身份证号</option>
							        </optgroup>
							    </select>
						    </label>
				    	</div>
					    <label class="handleBtns">
					    	<button type="button" class="btn btn-info shiny" >
					    		<i class="fa fa-search"></i>
					    		服务器端检索
					    	</button>
					    	<button type="button" class="btn btn-success shiny" >
					    		<i class="fa fa-plus"></i>
					    		新增记录
					    	</button>
					    	<button type="button" class="btn btn-magenta shiny" >
					    		<i class="fa fa-pencil"></i>
					    		修改记录
					    	</button>
					    </label>
				    </div>
		    </div>
				<table class="table table-striped table-bordered table-hover" id="searchable">
					<thead class="bordered-darkorange">
						<tr>
							<th scope="col">Rendering engine</th>
							<th scope="col">Browser</th>
							<th scope="col">Platform(s)</th>
							<th scope="col">Engine version</th>
							<th scope="col">CSS grade</th>
							<th scope="col">CSS grade</th>
							<th scope="col">CSS grade</th>
							<th scope="col">CSS grade last</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_engine" placeholder="Search engines" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_browser" placeholder="Search browsers" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_platform" placeholder="Search platforms" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_version" placeholder="Search versions" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_grade" placeholder="Search grades" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_grade" placeholder="Search grades" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_grade" placeholder="Search grades" class="form-control input-sm"></th>
							<th scope="col" rowspan="1" colspan="1"><input type="text" name="search_grade" placeholder="Search grades" class="form-control input-sm"></th>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td class="sorting_1">Gecko</td>
							<td class=" ">Firefox 1.0</td>
							<td class=" ">Win 98+ / OSX.2+</td>
							<td class="center ">1.7</td>
							<td class="center ">A</td>
							<td class="center ">A</td>
							<td class="center ">A</td>
							<td class="center ">A</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<!--Page Related Scripts-->
<script src="assets/js/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/datatable/ZeroClipboard.js"></script>
<script src="assets/js/datatable/dataTables.tableTools.min.js" ></script>
<script src="assets/js/datatable/dataTables.bootstrap.min.js"></script>
<script src="assets/js/datatable/datatables-init.js"></script>
<script src="assets/js/select/bootstrap-select.js"></script>
<script>
	//初始化数据列表查看器
	var dataTableView=InitiateSearchableDataTable.init();
	//属性选择器
	$(".selectpicker").selectpicker({
	    'selectedText': 'cat'
	});
	$(".earchSwitch").click(function(){
		var selectedFieldsDiv=$(".selectedFields");
		if(selectedFieldsDiv.css("display")=="block"){
			$(".earchSwitch").attr("title","单击此按钮关闭关键字搜索并打开高级搜索");
		}else{
			$(".earchSwitch").attr("title","单击此按钮关闭高级搜索并打开关键字搜索");
		}
		selectedFieldsDiv.slideToggle(200);
		$(".keywordSeach").slideToggle(200);
	});
</script>